<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi">
    <title>微秸宝</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
    <style>
        * {
            margin: 0 ;
            padding: 0;
        }
        html,body {
            width: 750px;
            height: 100%;
            margin: 0 auto;
            background-color: #F7F8FA;
        }
        .main-box {
            width: 100%;
            height: 550px;
            padding-top: 40px;
            background:  #5693EA!important; /* 一些不支持背景渐变的浏览器 */
            background:-moz-linear-gradient(top, #5693EA, #4977FD) !important;
            background:-webkit-gradient(linear, 0 0, 0 bottom, from(#5693EA), to(#4977FD)) !important;
            background:-o-linear-gradient(top, #5693EA, #4977FD) !important;
        }
        .main-box .day-num {
            width: 160px;
            height: 50px;
            font-size: 24px;
            color: #fff;
            text-align: center;
            margin-bottom: 40px;
            line-height: 50px;
            border-top-right-radius: 60px;
            border-bottom-right-radius: 60px;
            background-color: #88EC55;
        }
        .content {
            width: 100%;
            height: 500px;
            font-family: 微软雅黑;
            background-color: #fff;
        }
        .content ul {
            list-style:none;
            width: 100%;
            height: 500px;
        }
        .content li {
            float: left;
            width: 50%;
            height: 249px;
            font-size: 24px;
            padding-top: 52px;
            text-align: center;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        .content li .name {
            color: #636B7E;
            font-size: 26px;
            line-height: 50px;
        }
        .content li .name-value {
            line-height: 120px;
            font-size: 40px;
            font-weight: bold;
            color: #404246;
        }

    </style>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div class="main-box">
    <div class="day-num">
        第<span>24</span>天
    </div>
    <div id="main" style="width: 750px;height:450px; position: relative;">
    </div>
</div>
<div class="content">
    <ul>
        <li>
            <p class="name">土壤水分</p>
            <p class="name-value">47%</p>
        </li>

        <li>
            <p class="name">气压</p>
            <p class="name-value">105KPa</p>
        </li>
        <li>
            <p class="name">氧气含量</p>
            <p class="name-value">20%</p>
        </li>
        <li>
            <p class="name">二氧化碳含量</p>
            <p class="name-value">0.04%</p>
        </li>
    </ul>
</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var dataAxis = ['7/14', '7/15', '7/16', '7/17', '7/18', '7/19', '7/20', '7/21', '7/22', '7/23', '7/24', '7/25', '7/26', '7/27', '7/28', '7/29', '7/30', '7/31', '8/1' , '8/2' , '8/3' , '8/4' , '8/5' , '8/6' , '8/7' , '8/8' , '8/9' , '8/10' , '8/11' , '8/12' , '8/13' , '8/14' , '8/15' ];
    var data = [40, 48, 50, 56, 57, 58, 58, 58, 58, 58, 57, 56, 52, 55, 54, 51, 50, 50, 52, 55, 57, 57, 52, 53, 54, 55, 56, 56, 56, 56, 56, 57, 57];

    var yMax = 90;
    var dataShadow = [];

    for (var i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
    }

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer:{
                type: 'shadow',
                axis:'x',
                lineStyle: {
                    color: 'rgba(1,1,1,0)'
                },
                shadowStyle: {
                    color: '#fff',
                    opacity : 0.1
                }
            },
            showContent : false

        },
        grid: {
            show: false,
            width: '645px',
            height: '400px',
            left: '10%',
            bottom: 40
        },
        xAxis: {

            data: dataAxis,
            show: true,
            position: 'bottom',
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: 20
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#fff',
                    width: 1,
                    type: 'solid'
                }
            },
            z: 10
        },
        yAxis: {
            type: 'value',
//            name: '温度',
            min: 20,
            max: 80,
            position: 'left',
            splitNumber: 6,
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#fff'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                formatter: '{value}°C',
                textStyle: {
                    color: '#fff',
                    fontSize: 20
                }
            }
        },
        dataZoom: [
            {
                type: 'inside'
            }
        ],
        series: [
            { // For shadow
                type: 'bar',
                itemStyle: {
                    normal: {color: 'rgba(52,86,178,.4)'}
                },
                barGap:'-100%',
                barCategoryGap:'40%',
                data: dataShadow,
                animation: true
            },
            {
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#6EFFD8'},
                                {offset: 1, color: '#88EC55'}
                            ]
                        )
                    },
                    emphasis: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#36DBAE'},
                                {offset: 1, color: '#69CA37'}
                            ]
                        )
                    }
                },
                data: data
            }
        ],
        testStyle: {
            color: '#fff',
            fontsize: 24
        }
    };

    // Enable data zoom when user click bar.
    var zoomSize = 6;
    myChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        myChart.dispatchAction({
            type: 'dataZoom',
            startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
            endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        });
    });

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>